<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>曲线导航菜单指示器</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="navigation">
      <ul>
        <li class="list active">
          <a href="#">
            <span class="icon">
              <ion-icon name="home-outline"></ion-icon>
            </span>
            <span class="text">Home</span>
          </a>
        </li>
        <li class="list">
          <a href="#">
            <span class="icon">
              <ion-icon name="person-outline"></ion-icon>
            </span>
            <span class="text">Profile</span>
          </a>
        </li>
        <li class="list">
          <a href="#">
            <span class="icon">
              <ion-icon name="chatbubble-outline"></ion-icon>
            </span>
            <span class="text">Message</span>
          </a>
        </li>
        <li class="list">
          <a href="#">
            <span class="icon">
              <ion-icon name="camera-outline"></ion-icon>
            </span>
            <span class="text">Photo</span>
          </a>
        </li>
        <li class="list">
          <a href="#">
            <span class="icon">
              <ion-icon name="settings-outline"></ion-icon>
            </span>
            <span class="text">Settings</span>
          </a>
        </li>
        <div class="indicator"></div>
      </ul>
    </div>
    <script
      type="module"
      src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"
    ></script>
    <script
      nomodule
      src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"
    ></script>
    <script>
      const list = document.querySelectorAll(".list");
      function activeLink() {
        list.forEach((item) => item.classList.remove("active"));
        this.classList.add("active");
      }
      list.forEach((item) => item.addEventListener("click", activeLink));
    </script>
  </body>
</html>
